<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="Refresh" content="300; Url=#">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Multi-colored Progress Bars</title>
    <link rel="stylesheet" href="http://www.html5tricks.com/demo/5-progress-bars/css/style.css">
    <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body style="background-color: black ">
<script src="http://www.html5tricks.com/follow.js" type="text/javascript"></script>
<script src="http://www.html5tricks.com/gg_bd_ad_720x90.js" type="text/javascript"></script>

<section class="container" style="color:#ffffaa;width: 150px;height: 500px;position: absolute;top: -5%;left: 1%">
    {% for k,v in components %}
        <div class="progress" style="background: #000">
            <span class='blue'  style='width: {{ v }}%;'><span style="color: white;">{{ v }}%</span></span><br>{{ k }}
        </div>
    {% endfor %}

</section>


<!-- Baidu Button BEGIN -->

<script type="text/javascript" id="bdshare_js" data="type=tools"></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
            ();
</script>
<!-- Baidu Button END -->


<script src="http://www.html5tricks.com/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
</body>
</html>
